<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>伪元素选择器使用</title>
    <style>
        div {
            width: 500px;
            height: 50px;
            border: 1px solid red;
        }
        
        div::before {
            content: "这是伪类选择器的before";
            /* 在css3伪类选择器中content:"" 必不可少,格式不可缺省 */
            /* 伪类属性为行内块 */
            color: skyblue;
        }
        
        div::after {
            content: "这是伪类选择器的after";
            color: greenyellow;
        }
        /* 伪类属性为行内块 */
        /* before && after不一定要求成对出现,可缺省任意一个 */
    </style>

</head>

<body>

    <div>
        这是div盒子的内容
    </div>
</body>

</html>